<template>
  <view :class="$style.victim_container" @click="openVictimInfoPage">
    <view :class="$style.title">{{ titleName }}</view>
    <view :class="$style.victim_content" class="flex justify-between">
      <view :class="$style.victim_info" class="flex flex-col justify-center">
        <view :class="$style.basic_info" class="flex items-center">
          <view :class="$style.name">{{ affectedInfo.dwmc }}</view>
        </view>
        <view :class="$style.address">
          <text> {{ affectedInfo.dwdz }}</text>
        </view>
      </view>
      <view :class="$style.victim_state" :style="{ background: alertColor[affectedInfo.dwdj] }">
        {{ getVictimType(affectedInfo.dwlx, affectedInfo.dwdj) }}
      </view>
    </view>

  </view>
</template>

<script setup lang='ts'>

import { victimType, alertLevel, alertColor } from '@/static'
/**
 * 受灾对象信息
 */
const titleName = "对象信息";
interface Props {
  affectedInfo: any
};
const { affectedInfo = {} } = defineProps<Props>();

function getVictimType(type: string, level: string) {
  if (type === '1') {
    return alertLevel[level] + victimType[type]
  } else {
    return victimType[type]
  }
}

function openVictimInfoPage() {
  uni.navigateTo({ url: '/pages/victim-info/index' })
}
</script>

<style lang='less' module>
.victim_container {
  width: calc(100% - 60rpx);
  box-sizing: border-box;
  min-height: 200rpx;
  background: #ffffff;
  box-shadow: 0rpx 4rpx 19rpx 1rpx rgba(51, 51, 51, 0.2);
  padding: 10rpx 10rpx 10rpx 20rpx;
  border-radius: 20rpx;
  font-family: Microsoft YaHei;

  .title {
    font-size: 30rpx;
    margin-bottom: 10rpx;
    font-weight: bold;
    color: #333333;
  }

  .victim_content {
    font-size: 26rpx;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    line-height: 40px;
  }

  .basic_info {
    font-size: 22rpx;
    color: #ffffff;
    line-height: 30rpx;

    .name {
      font-size: 26rpx;
      color: #999999;
      margin-right: 25rpx;
    }

    // .level {
    //   height: 30rpx;
    //   padding: 5rpx 15rpx;
    //   background: #00d0ce;
    //   border-radius: 8rpx;
    //   margin-right: 20rpx;
    //   line-height: 30rpx;
    // }

    // .type {
    //   height: 30rpx;
    //   padding: 5rpx 10rpx;
    //   background: #c070b3;
    //   border-radius: 8rpx;
    //   line-height: 30rpx;
    // }
  }

  .victim_state {
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    font-size: 48rpx;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    line-height: 65rpx;
  }

  .address {
    margin-top: -10rpx;
    height: 73rpx;
  }
}
</style>
